<template>
	<view class="padding-top-sm">
		<view class="edgeInsetTop"></view>
		<!-- <view class="tips">请填写服务地址用于服务！</view> -->

		<view class="cu-form-group" v-show="addressType">
			<view class="title">姓名</view>
			<input type="text" placeholder="姓名" v-model="addressData.name"></input>
		</view>
		<view class="cu-form-group" v-show="addressType">
			<view class="title">手机号码</view>
			<input type="number" placeholder="手机号码" maxlength="11" v-model="addressData.mobile"></input>
		</view>
		<!-- 1.1.5升级 -->
		<view class="cu-form-group area">
			<view class="click" @tap="btnClick"></view>
			<view class="title">所在地区</view>
			<input type="text" :value="formatted_address" placeholder="选择地区" disabled />
		</view>
		<view class="cu-form-group align-start">
			<view class="title" style="padding-top: 16rpx;">详细地址</view>
			<!-- 1.1.5升级 -->
			<textarea maxlength="-1" @confirm="confirmInputtips" @blur="blurInputtips"
				:placeholder-style="addressData.address==''?'color: #bbb':''" :adjust-position="false"
				v-model="addressData.address" placeholder="请输入详细地址~" />
		</view>
		<view class="cu-form-group margin-top-bj" v-show="addressType">
			<view class="titles">设为默认地址</view>
			<!-- <switch @change="switchChange" :class="addressData.default == 1?'checked':''" :checked="addressData.default == 1"></switch> -->
			<u-checkbox @change="switchChange" active-color="#4CBD66" v-model="checked" :label-disabled="false"
				shape="circle"></u-checkbox>
		</view>
		<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
			<view class="item" v-for="(item,index) in addressList.tips" :key="index" @tap="addressTisp(item)">
				<view>{{item.address}}</view>
				<text>{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- 1.0.5升级 -->
		<!-- 1.0.6升级 -->
		<view class="padding-bj flex flex-direction margin-top" v-show="addressType">
			<button @tap="confirm" class="cu-btn bg-green lg">保存</button>
		</view>
		<wanl-select-address :provinvial="provinvial" ref="wanlAddressRef" :address="address" @change="change"
			@close="close"></wanl-select-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {
					province: {
						id: '',
						name: '',
						pid: ''
					},
					city: {
						id: '',
						name: '',
						pid: ''
					},
					area: {
						id: '',
						name: '',
						pid: ''
					},
					street: {
						id: '',
						name: '',
						pid: ''
					},
				},
				checked: false,
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					province: '', //省份
					city: '', // 城市
					district: '', // 县
					street: '',
					address: '', //详细地址
					lng: '', // 经度
					lat: '', // 纬度
				},
				formatted_address: '',
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true,
				provinvial: [],
				flag: true,
				c:1
			}
		},
		onLoad(option) {
			if(option.c) {
				this.c = option.c
			}
			uni.request({
				url: '/wanlshop/common/area',
				success: (res) => {
					if (res.data.length > 0) {
						this.provinvial = res.data
					} else {
						this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
					}
				}
			});
			let title = '添加地址';
			if (option.type === 'add') {
				this.addressData.default = 1
				this.checked = true
			}
			if (option.type === 'edit') {
				title = '编辑地址'
				this.addressData = JSON.parse(option.data)
				let data = this.addressData;
				console.log(data)
				this.formatted_address =
					`${data.address_detail}`
				let c = data.address_detail.split('/')
				this.address = {
					province: {
						id: data.province,
						name: c[0],
						pid: 0
					},
					city: {
						id: data.city,
						name: c[1],
						pid: data.province
					},
					area: {
						id: data.district,
						name: c[2],
						pid: data.city
					},
					street: {
						id: data.street,
						name: c[3],
						pid: data.district
					}
				}
				if (this.addressData.default == 1) {
					this.checked = true
				} else {
					this.checked = false
				}
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title:title
			})
		},
		methods: {
			close() {
				console.log(JSON.stringify(this.address))
				if (!this.flag) {
					this.$refs.wanlAddressRef.setData(this.address);
				}
			},
			change(value) {
				this.flag = false
				if (!value.street.name) return false;
				let address =
					`${value.province.name || ''}${value.city.name || ''}${value.area.name || ''}${value.street.name || ''}`;
				this.formatted_address = address;
				uni.request({
					url: '/member/address/getAddressLatlng',
					data: {
						key: this.$config.amapkey,
						address: address,
						city: value.city.name,
						output: 'JSON'
					},
					success: (res) => {
						this.flag = true
						console.log(res)
						let location = res.data[0].location.split(',');
						let lng = location[0];
						let lat = location[1];
						this.addressData.province = value.province.id;
						this.addressData.city = value.city.id;
						this.addressData.district = value.area.id;
						this.addressData.street = value.street.id;
						this.addressData.lng = lng;
						this.addressData.lat = lat;

						this.address = {
							province: {
								id: value.province.id,
								name: value.province.name,
								pid: 0
							},
							city: {
								id: value.city.id,
								name: value.city.name,
								pid: value.province.id
							},
							area: {
								id: value.area.id,
								name: value.area.name,
								pid: value.city.id
							},
							street: {
								id: value.street.id,
								name: value.street.name,
								pid: value.area.id
							}
						}
						this.$refs.wanlAddressRef.setData(this.address);

					}
				})
			},
			switchChange(e) {
				if (e.value) {
					this.addressData.default = 1;
					this.checked = true
				} else {
					this.addressData.default = 0;
					this.checked = false
				}
			},
			btnClick() {
				// this.$refs.wanlAddress.show()
				this.$refs.wanlAddressRef.open();
			},
			// 详细地址失去焦点
			blurInputtips(event) {
				this.addressData.address = event.detail.value;
				setTimeout(() => {
					this.addressType = true;
				}, 10);
			},
			// 详细地址已完成
			confirmInputtips(event) {
				this.addressType = true;
			},
			// 详细地址获取焦点
			focusInputtips(event) {
				this.addressType = false;
			},
			// 详细地址替换
			addressTisp(data) {
				this.addressData.adcode = data.adcode;
				this.addressData.address = data.address;
				this.addressData.address_name = data.name;
				console.log(data)
				// 1.0.5升级
				if (data.address) {
					this.addressData.address_full = this.addressData.address_name + this.addressData.address;
				}
				this.addressData.location = data.location;
				this.addressType = true;
			},
			//提交
			async confirm() {
				let that = this
				let data = this.addressData;
				if (!data.name) {
					this.$wanlshop.msg('请填写收货人姓名');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				if (!data.city) {
					this.$wanlshop.msg('请选择地区');
					return;
				}
				if (!data.address) {
					this.$wanlshop.msg('请填写详细信息');
					return;
				}
				let object = {
					"name": data.name,
					"mobile": data.mobile,
					"default": data.default,
					"province": this.address.province.name,
					"city": this.address.city.name,
					"district": this.address.area.name,
					"street": this.address.street.name,
					"address": data.address,
					"lng": data.lng,
					"lat": data.lat
				}
				if(this.manageType=='edit') {
					object.id = this.addressData.id
				}
				if(this.c == 2) {
					await uni.request({
						url: `/member/address/${this.manageType}`,
						method: 'POST',
						data: object,
						success: res => {
							console.log(res,3333333333333)
							that.$wanlshop.msg(res.msg);
							uni.navigateBack()
						}
					});
				} else {
					this.$wanlshop.prePage().refreshList(object, this.manageType);
					this.$wanlshop.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
					this.$wanlshop.back(1);
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.cu-form-group {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
	}

	/* 1.1.5升级 */
	.cu-form-group.area {
		position: relative;
	}

	.cu-form-group.area .click {
		position: absolute;
		z-index: 99;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 30rpx;

		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.cu-form-group input,
	.cu-form-group textarea {
		font-size: 28rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
		padding: 16rpx 30rpx;
		display: inline-block;
	}

	.cu-form-group input {
		height: 80rpx;
	}

	.cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
		border-radius: 50rpx;
	}

	.tipsScroll {
		width: 100%;
		height: 500rpx;
		padding: 0 50rpx;
	}

	.tipsScroll .item {
		margin: 25rpx 0;
	}

	.tipsScroll .item view {
		color: #B8B8B8;
		font-size: 22rpx;
	}

	.tipsScroll .item text {
		color: #333;
	}
</style>
<style lang="less" scoped>
	.tips {
		width: 690rpx;
		height: 68rpx;
		background: #DDFCCA;
		border-radius: 34rpx;

		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #46661E;
		line-height: 68rpx;
		padding: 0 26rpx;
		margin: 0 30rpx 20rpx 30rpx;
	}

	.cu-form-group+.cu-form-group {
		border: none;
	}

	.titles {
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;
	}
</style>